<template>
  <view class="page">
    <scroll-view scroll-y="true" class="scroll-list">
      <view class="page-main">
        <view class="workbench-list">
          <template v-for="(item, index) in menuList">
            <template v-if="item.key === '-1'">
              <view :key="index" class="workbench-item">
                <view class="workbench-title">{{item.label}}</view>
                <view class="grid">
                  <view v-for="(m, idx) in item.menuList" :key="idx" :index="idx" class="grid-item"
                    @click="navTo(m.path)">
                    <view v-if="m.path==='/pages/flowableplus/work/todo/index'" class="nav-item">
                      <view class="nav-icon" :image="m.source">
                        <image :src="'/static/images/icon_' + m.source + '.png'" mode=""></image>
                        <u-badge v-if="todoCount > 0" :count="todoCount" :offset="[-10, 0]"></u-badge>
                      </view>
                      <view class="nav-text">{{m.name}}</view>
                    </view>
                    <view v-else class="nav-item">
                      <view class="nav-icon" :image="m.source">
                        <image :src="'/static/images/icon_' + m.source + '.png'" mode=""></image>
                      </view>
                      <view class="nav-text">{{m.name}}</view>
                    </view>
                  </view>
                  <view v-if="item.key=='-1'" class="grid-item">
                    <view class="nav-item" @click="navTo('/pages/sys/workbench/install')">
                      <view class="nav-icon">
                        <image src="/static/images/icon_fjutfont fjut-tianjiachangyong.png" mode=""></image>
                      </view>
                      <view class="nav-text">添加常用</view>
                    </view>
                  </view>
                </view>
              </view>

              <view v-if="news.length" class="workbench-item">
                <view class="workbench-title" @click="switchTab('/pages/mis/rssoffer/index')">
                  校园新闻<view class="more">更多</view>
                </view>
                <view class="message-list">
                  <view v-for="item in news" :key="item.id" class="message-item" @click="toDetail(item.link)">
                    <view class="message-title multiple-ellipsis">
                      <image src="../../../static/images/icon_news.png" mode=""></image>
                      {{item.title}}
                    </view>
                  </view>
                </view>
              </view>

              <view v-if="todoList.length" class="workbench-item">
                <view class="workbench-title" @click="navTo('/pages/flowableplus/work/todo/index')">
                  我的日程<view class="more">更多</view>
                </view>
                <view class="message-list">
                  <view v-for="item in todoList" :key="item.id" class="message-item" @click="handleProcess(item)">
                    <view class="message-title multiple-ellipsis">{{item.title}}</view>
                  </view>
                </view>
              </view>

              <view class="workbench-item">
                <scroll-view class="tab-list-scroll" scroll-x="true">
                  <view class="tab-list">
                    <view v-for="(item, index) in mergeList" :key="index" class="tab-item"
                      :class="index === currentTab ? 'active' : ''" @click="currentTab = index">
                      {{item.label}}
                    </view>
                  </view>
                </scroll-view>
                <view v-if="mergeList[currentTab]" class="grid">
                  <view v-for="(m, idx) in mergeList[currentTab].menuList" :key="idx" :index="idx" class="grid-item"
                    @click="navTo(m.path)">
                    <view v-if="m.path==='/pages/flowableplus/work/todo/index'" class="nav-item">
                      <view class="nav-icon" :image="m.source">
                        <image :src="'/static/images/icon_' + m.source + '.png'" mode=""></image>
                        <u-badge v-if="todoCount > 0" :count="todoCount" :offset="[-10, 0]"></u-badge>
                      </view>
                      <view class="nav-text">{{m.name}}</view>
                    </view>
                    <view v-else class="nav-item">
                      <view class="nav-icon" :image="m.source">
                        <image :src="'/static/images/icon_' + m.source + '.png'" mode=""></image>
                      </view>
                      <view class="nav-text">{{m.name}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </template>

            <view v-else :key="index" class="workbench-item">
              <view class="workbench-title">{{item.label}}</view>
              <view class="grid">
                <view v-for="(m, idx) in item.menuList" :key="idx" :index="idx" class="grid-item"
                  @click="navTo(m.path)">
                  <view v-if="m.path==='/pages/flowableplus/work/todo/index'" class="nav-item">
                    <view class="nav-icon" :image="m.source">
                      <image :src="'/static/images/icon_' + m.source + '.png'" mode=""></image>
                    </view>
                    <view class="nav-text">{{m.name}}</view>
                    <u-badge v-if="todoCount > 0" :count="todoCount" :offset="[-10, 0]"></u-badge>
                  </view>
                  <view v-else class="nav-item">
                    <view class="nav-icon" :image="m.source">
                      <image :src="'/static/images/icon_' + m.source + '.png'" mode=""></image>
                    </view>
                    <view class="nav-text">{{m.name}}</view>
                  </view>
                </view>
                <view v-if="item.key=='-1'" class="grid-item">
                  <view class="nav-item" @click="navTo('/pages/sys/workbench/install')">
                    <view class="nav-icon">
                      <image src="/static/images/icon_fjutfont fjut-tianjiachangyong.png" mode=""></image>
                    </view>
                    <view class="nav-text">添加常用</view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </view>
        <u-divider>已经到底了</u-divider>
      </view>
    </scroll-view>
  </view>
</template>
<script>
  import HeadNavBar from '@/components/headnavbar/index';
  import {
    validatenull
  } from '@/common/validate.js'
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    components: {
      HeadNavBar
    },
    data() {
      return {
        show: false,
        head: '/static/aidex/images/head.png',
        imgList: [],
        todoCount: 0,
        menuList: [],
        mergeList: [],
        currentTab: 0,
        news: [],
        todoList: [],
      };
    },
    onLoad() {
      this.getRotationList();
      this.initMenu();
    },
    methods: {
      initMenu() {
        let this_ = this;
        this.$u.api.menu.getRoute({}).then(res => {
          this.menuList = res.data.filter(_ => !_.isMerge);
          this.mergeList = res.data.filter(_ => _.isMerge);
          //如果有待办链接，则去取待办数量
          res.data.forEach((item) => {
            item.menuList.forEach((subItem) => {
              if (subItem.path === '/pages/flowableplus/work/todo/index') {
                this.$u.api.wflow.process.todoCount({}).then(res => {
                  if (res.code == 200) {
                    this_.todoCount = res.data;
                  }
                });

              }
            })
          })
        });

        this.$u.api.rssoffer.getLatestNews({}).then(res => {
          this.news = res.data || [];
        });

        this.$u.api.rssoffer.getLatestTodo({}).then(res => {
          this.todoList = res.data || [];
        });
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      switchTab(url) {
        uni.switchTab({
          url: url
        });
      },
      imgListClick(index) {
        if (!validatenull(this.imgList[index].toLink)) {
          let url = encodeURIComponent(this.imgList[index].toLink);
          uni.navigateTo({
            url: '/pages/common/webview?url=' + url
          })
        }
      },
      itemClick(index) {
        console.log(index);
      },
      getRotationList() {
        this.$u.api.rotation.list({}).then(res => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              let json = {}
              json['image'] = item.url
              json['title'] = item.title
              json['toLink'] = item.toLink
              this.imgList.push(json);
            })
          }
        });
      },
      toDetail(url) {
        window.location = url;
      },
      checkButtonPermission(code) {
        return this.hasPermission(code);
      },
      handleProcess(row) {
        if (!this.checkButtonPermission('work_todo_approval')) {
          return;
        }
        let procInsId = row.procInsId;
        let taskId = row.taskId;
        this.$u.route({
          url: 'pages/flowableplus/work/comp/detail',
          params: {
            procInsId,
            taskId,
          },
        })
      },
    }
  };
</script>
<style lang="scss">
  .page {
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    background: #F0F1F5;
  }

  .scroll-list {
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    background: #F0F1F5;
  }

  .page-main {
    padding: 418rpx 24rpx 0;
    background: url('../../../static/images/workbench_bg.png') no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }

  .workbench-list {
    min-height: 128rpx;
  }

  .workbench-item {
    border-radius: 40rpx;
    padding-top: 48rpx;
    background: #fff;
    overflow: hidden;

    &:first-child {
      background: #fff url('../../../static/images/workbench_header_bg.png') no-repeat;
      background-position: top center;
      background-size: 100% auto;
    }

    &+.workbench-item {
      margin-top: 32rpx;
    }

    .grid {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 48rpx 0 0;
    }

    .grid-item {
      flex-shrink: 0;
      width: 25%;
      padding-bottom: 48rpx;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .nav-icon {
      position: relative;
      width: 118rpx;
      height: 118rpx;

      image {
        width: 118rpx;
        height: 118rpx;
      }
    }

    .nav-text {
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 28rpx;
      font-weight: 500;
      color: #000;
      overflow: hidden;
    }
  }

  .workbench-title {
    padding: 0 32rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #333;

    .primary {
      color: #3989FC;
    }

    .more {
      float: right;
      position: relative;
      display: inline-block;
      padding-right: 16rpx;
      line-height: 48rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;

      &::after {
        content: '';
        position: absolute;
        top: 16rpx;
        right: 0;
        display: inline-block;
        width: 12rpx;
        height: 12rpx;
        border-top: 2px solid #999;
        border-right: 2px solid #999;
        transform: rotate(45deg);
      }
    }
  }

  .tab-list-scroll {
    width: 100%;
    height: 96rpx;
    margin-top: -48rpx;
    background: #f7f7f7;
  }

  .tab-list {
    display: flex;
  }

  .tab-item {
    flex-shrink: 0;
    height: 96rpx;
    border-radius: 40rpx 40rpx 0 0;
    padding: 0 32rpx;
    white-space: nowrap;
    line-height: 96rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
    overflow: hidden;

    &.active {
      background: #fff;
    }
  }

  .message-list {
    padding: 16rpx 32rpx;
  }

  .message-item {
    padding: 32rpx 0;

    &+.message-item {
      border-top: 1px solid #eee;
    }
  }

  .message-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;

    image {
      width: 60rpx;
      height: 30rpx;
      vertical-align: top;
      margin-top: 6rpx;
      margin-right: 4rpx;
    }
  }

  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .multiple-ellipsis {
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>